<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column v-if="!hideCity">
				<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.name}}</view>
			</picker-view-column>
			<picker-view-column v-if="!hideArea">
				<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.name}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pickVal:[],
				range:{
					provinces:[],
					citys:[],
					areas:[]
				},
				checkObj:{}
			};
		},
		props:{
			itemHeight:{
				type:String,
				default:"44px"
			},
			value:{
				type:[Array,String],
				default:""
			},
			defaultType:{
				type:String,
				default:"name"
			},
			hideArea:{
				type:Boolean,
				default:false
			},
			hideCity:{
				type:Boolean,
				default:false
			},
			goods:{
				type:String,
				default:'0'
			},
			verti:{
				type:String,
				default:'0'
			}
		},
		watch:{
			value(val){
				this.getData();
			}
		},
		async created() {
			this.getData();
		},
		methods:{
			backdata(id){
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://app.wisili.com/index.php/api/Region/Index', //仅为示例，并非真实接口地址。
						data: {
							pid: id,
							goods_id:this.goods,
							exhibition_level_id:Number(this.verti)+1
						},
						success: function(res) {
							resolve(res.data.data)
						}
					})
				})
			},
			
			async getData(){
				//用来处理初始化数据 
				let provinces=await this.backdata(0);
				let dVal=[];
				// 默认值
				let value=this.value;
				let a1=value[0];//默认值省
				let a2=value[1];//默认值市
				let a3=value[2];//默认值区、县
				let province,city,area;
				let provinceIndex=provinces.findIndex((v)=>{
					return v[this.defaultType]==a1
				});
				provinceIndex=value?(provinceIndex!=-1?provinceIndex:0):0;
				// 市
				let citys=await this.backdata(provinces[provinceIndex].id);
				// let citys=provinces[provinceIndex].children;
				let cityIndex=citys.findIndex((v)=>{
					return v[this.defaultType]==a2
				});
				cityIndex=value?(cityIndex!=-1?cityIndex:0):0;
				// 区
				// let areas=citys[cityIndex].children;
				let areas =await this.backdata(citys[cityIndex].id)
				let areaIndex=areas.findIndex((v)=>{
					return v[this.defaultType]==a3;
				});
				areaIndex=value?(areaIndex!=-1?areaIndex:0):0;
				if(this.hideArea){
					if(this.hideCity){
						dVal = [provinceIndex]
					}else{
						dVal = [provinceIndex,cityIndex]
					}
				}else{
					dVal = [provinceIndex,cityIndex,areaIndex]
				}
				//dVal = this.hideArea?[provinceIndex,cityIndex]:(this.hideCity?:[provinceIndex]:[provinceIndex,cityIndex,areaIndex]);
				// dVal=this.hideArea?[provinceIndex,cityIndex]:[provinceIndex,cityIndex,areaIndex];
				province=provinces[provinceIndex];
				city=citys[cityIndex];
				area=areas[areaIndex];
				
				let obj=this.hideArea&&!this.hideCity?{
					province,
					city
				}:(this.hideCity?{province}:{
					province,
					city,
					area
				})
				let result = this.hideArea&&!this.hideCity?{
					provinces,
					citys,
					dVal,
					obj
				}:(this.hideCity?{
					provinces,
					dVal,
					obj
				}:{
					provinces,
					citys,
					areas,
					dVal,
					obj
				})
				let oprovince = obj.province 
				let ocity = this.hideCity?{}:obj.city
				let oarea=this.hideArea?{}:obj.area
				let devalue =this.hideArea&&!this.hideCity?[oprovince.id,ocity.id]:(this.hideCity?[oprovince.id]:[oprovince.id,ocity.id,oarea.id])
				let oresult = this.hideArea&&!this.hideCity?`${oprovince.name+ocity.name}`:(this.hideCity?`${oprovince.name}`:`${oprovince.name+ocity.name+oarea.name}`)
				this.range=this.hideArea?{
					provinces,
					citys,
				}:(this.hideCity?{provinces}:{
					provinces,
					citys,
					areas
				});
				this.checkObj=obj;
				this.$nextTick(()=>{
					this.pickVal=result.dVal;
				});
				this.$emit("change",{
					result:oresult,
					value:devalue,
					obj:obj
				})
			},
			async handlerChange(e){
				let arr=[...e.detail.value];
				let provinceIndex=arr[0],cityIndex=this.hideCity?0:arr[1],areaIndex=this.hideArea&&!this.hideCity?0:arr[2];
				// 切换时的逻辑
				let provinces = await this.backdata(0)
				let citys = (await this.backdata(provinces[provinceIndex].id))||[]
				// let citys=(provinces[provinceIndex]&&provinces[provinceIndex].children)||provinces[provinces.length-1].children||[];
				let areas = (await this.backdata(citys[cityIndex].id))||[]
				let province = provinces[provinceIndex]
				let city = this.hideCity?{}:citys[cityIndex]
				let area =this.hideArea&&!this.hideCity?{}:areas[areaIndex];
				let obj=this.hideArea&&!this.hideCity?{
					province,
					city
				}:(this.hideCity?{province}:{
					province,
					city,
					area
				})
				if(this.checkObj.province.name!=province.name){
					//当省更新的时候需要刷新市、区县的数据;
					this.range.citys=citys;
					if(!this.hideArea){
						this.range.areas=areas;
					}
					if(!this.hideCity){
						this.range.citys=citys
					}
				}
				if(!this.hideCity){
					if(this.checkObj.city.name!=city.name){
						//当市更新的时候需要刷新区县的数据;
						if(!this.hideArea){
							this.range.areas=areas;
						}
						if(!this.hideCity){
							this.range.citys=citys
						}
					}
				}
				this.checkObj=obj;
				this.$nextTick(()=>{
					this.pickVal=arr;
				})
				let result=this.hideArea&&!this.hideCity?`${province.name+city.name}`:(this.hideCity?`${province.name}`:`${province.name+city.name+area.name}`);
				let value=this.hideArea&&!this.hideCity?[province.id,city.id]:(this.hideCity?[province.id]:[province.id,city.id,area.id]);
				this.$emit("change",{
					result:result,
					value:value,
					obj:obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";	
</style>

